<template>
  <!-- 催收执行页-通讯录模块 -->
  <section class="component collection-add-list panel">
    <el-tabs v-model="activeName">
      <el-tab-pane
        :key="item.name"
        :label="item.label"
        :name="item.name"
        v-for="item of tabs"
      ></el-tab-pane>
    </el-tabs>
    <keep-alive>
      <component :is="activeName" :ref="activeName"></component>
    </keep-alive>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { components, tabs } from "./collection-add-list/";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    ...components
  }
})
export default class CollectionAddList extends Vue {
  @CollectionExecutionModule.State private addListActiveName;
  @CollectionExecutionModule.Mutation private updateAddListActiveName;

  private tabs: any[] = tabs;

  private get activeName() {
    return this.addListActiveName;
  }

  private set activeName(val) {
    this.updateAddListActiveName(val);
  }
}
</script>

<style lang="less">
.component.collection-add-list {
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0px 0px 0px 10px;
  width: 70%;
  height: 433px;
  overflow-y: auto;
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        width: 100%;
      }
    }
  }
}
</style>
